<template>
  <div class="container question-icon" v-if="question" label="题目详情">
    <div>
      <div class="col-title">
        <!-- 题目 -->
        <div class="col-content">
          <b class="text-title margin-bottom0" :style="{}"
            >{{ question.ID }}.{{ question.name }}</b
          >
          <span v-if="question.source" class="question-source">
            {{ question.source }}
          </span>
          <!-- <div class="problem-tag"> -->
          <el-popover placement="right" title="" :width="150" trigger="hover">
            <template #reference>
              <el-tag
                class="problem-tag-label"
                text
                type="primary"
                effect="plain"
              >
                <span>显示标签</span>
                <el-icon class="problem-tag-label-icon" size="default">
                  <CaretBottom />
                </el-icon>
              </el-tag>
            </template>
            <div class="problem-tag-item">
              <el-tag
                class="question-label"
                text
                type="primary"
                effect="plain"
                size=""
                v-for="(vo, keys) in question.questionlabel"
                v-text="getlabel.find((e) => e.ID === vo.labelid)?.name"
                :key="`1-${keys}`"
              >
              </el-tag>
            </div>
          </el-popover>
          <!-- </div> -->
        </div>
        <div class="problem-menu">
          <!-- question?.range?.toUpperCase() == DATAform.CODEFORCES || -->
          <span v-if="question.source == DATAform.CODEFORCES">
            <el-text
              @click="getCfQuestionUrl(question.dataform || '')"
              class="cursor-pointer"
              type="primary"
              size="default"
            >
              <el-link type="primary">
                <el-icon>
                  <Link />
                </el-icon>
                跳转CF原题
              </el-link>
            </el-text>
          </span>
          <!-- 新开评测页面搜索此题 -->
          <span>
            <el-text
              v-if="
                question.range === 'match' ||
                question.range === 'public' ||
                question.range === 'accoder'
              "
              class="cursor-pointer"
              type="primary"
              @click="copy"
              size="default"
            >
              <el-link type="primary">
                <el-icon>
                  <Star />
                </el-icon>
                收藏题目
              </el-link>
            </el-text>
          </span>
          <span>
            <el-text
              v-if="isAdmin || routerNames.find((e) => e === '评测')"
              @click="toAssessment"
              class="cursor-pointer"
              type="primary"
              size="default"
            >
              <el-link type="primary">
                <el-icon>
                  <List />
                </el-icon>
                提交记录
              </el-link>
            </el-text>
          </span>
        </div>
      </div>

      <div class="question-intr">
        <span
          >时间限制：{{
            question.timelimit ? Number(question.timelimit) : 200
          }}ms</span
        >
        <span
          >内存限制：
          {{
            question.memorylimit ? Number(question.memorylimit) : 128
          }}MB</span
        >
        <span
          >难度：
          <div :class="`difficulty-${question.difficulty}`">
            {{ question.difficulty ? DATAdifficulty[question.difficulty] : "" }}
          </div>
        </span>
        <span :style="{ padding: 0, textAlign: 'right' }">
          <div class="btn-group" role="group" aria-label="First group">
            <button
              type="button"
              class="btn btn-sm"
              :class="font === 14 ? 'btn-dark' : 'btn-secondary'"
              @click="font = 14"
            >
              小
            </button>
            <button
              type="button"
              class="btn btn-sm"
              :class="font === 18 ? 'btn-dark' : 'btn-secondary'"
              @click="font = 18"
            >
              大
            </button>
          </div>
        </span>
      </div>
    </div>
    <div>
      <contextlist
        v-bind="{ question }"
        :style="{ '--font-size': font + 'px' }"
      ></contextlist>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ElMessage, ElMessageBox, ElNotification } from "element-plus";
import { computed, ref, watch } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { asynccopyquestion } from "../../../api";
import { Storekey } from "../../../interface";
import Studycodemodel from "../../../mysql_interface/studycodemodel";
import contextlist from "../../components/watchQuestion/contextlist.vue";
import { DATAform } from "../../data/data";
import { DATAdifficulty } from "../../../index/data/data";
const router = useRouter();

const questionfont = localStorage.getItem("questionfont");
const font = ref(questionfont ? Number(questionfont) : 14);

const t = defineProps<{
  question: Studycodemodel.Iquestion;
  routerNames: string[];
}>();

const store = useStore(Storekey);
// 当前登录用户
const user = computed(() => {
  return store.state.user;
});
const teamid = computed(() => {
  return user.value?.teamid;
});
const vip = computed(() => {
  return user.value?.uservip?.find((c) => c.viplistid === 1);
});
const isAdmin = computed(() => {
  return user.value?.isAdmin;
});
const team = computed(() => {
  return store.state.team?.rows || [];
});
const getlabel = computed(() => {
  return store.state.label?.rows || [];
});

//
function toAssessment(row: any, column: any) {
  const formdata = {
    questionid: t.question.ID,
    // userid: user.value.ID,
  };
  // 跳转评测界面 传入用户和题单号
  router.push({ name: "评测", query: formdata });
}

watch(
  () => font.value,
  (e) => {
    localStorage.setItem("questionfont", String(e));
  }
);

async function copy() {
  ElMessageBox.confirm(
    "复制为我的题目后，您可以在“题目列表-我的题目”中进行查看",
    "提示",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "info",
    }
  )
    .then(() => {
      asynccopyquestion({ ID: t.question.ID })
        .then((c) => {
          ElNotification({
            title: "提示",
            message:
              "该题已复制到【我的题目】，您可以在创建任务、创建比赛时在【我的题目】中找到该题。",
            duration: 0,
          });
        })
        .catch((f) => {
          ElMessage.error(f);
        });
    })
    .catch((c) => {});
}

function getCfQuestionUrl(v: string = "") {
  v = v || "";
  let url = "https://codeforces.com/problemset/problem";
  let str = v.split("-")[0].replace("CF", "");
  let path1 = str.slice(0, str.length - 1);
  let path2 = str.slice(str.length - 1);
  // return `${url}/${path1}/${path2}`
  window.open(`${url}/${path1}/${path2}`);
}
</script>

<style scoped>
.col-title {
  margin: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.col-content {
  display: inline-flex;
  align-items: center;
}

.question-source {
  background-color: #f6f6f6;
  color: #8c8c8c;
  font-size: 14px;
  height: 26px;
  border-radius: 4px;
  display: inline-block;
  padding: 4px 8px;
  line-height: 18px;
  /* transform: translateY(-3px); */
  margin-left: 12px;
  font-weight: 400;
}

.problem-tag {
  display: inline-block;
}

/* 显示标签 */
.problem-tag-label {
  box-sizing: border-box;
  width: 78px;
  height: 28px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  padding: 4px;
  line-height: 20px;
  font-size: 12px;
  border-radius: 4px;
  margin-left: 10px;
  /* color: #ffffff; */
  /* box-shadow: var(--el-box-shadow-light); */
}

.problem-tag-label-icon {
  display: inline-block;
  margin-left: 2px;
  /* height: 1ex !important; */
}

.problem-tag-item {
  span {
    margin: 2px;
  }
}

.problem-menu {
  min-width: 80px;
  display: flex;
  align-items: center;

  span {
    margin-left: 5px;
  }
}

.question-intr {
  margin-top: 14px;
  border-radius: 4px;
  border: 1px solid #f0f0f0;
  background: #fbfbfb;
  padding: 10px;
  line-height: 1.8;
  margin-bottom: 10px;
  font-size: 13px;

  display: flex;
  flex-wrap: wrap;

  /* align-items: center; */
  span {
    display: inline-block;
    margin: 10px 40px 0 0;
  }
}
</style>
